<template>
  <div class="Echarts">
    <div id="main" style="width: 418px;height: 267px;"></div>
  </div>
</template>
 
<script>
export default {
  name: 'Echarts',
  data() {
  	return{
  		cockpitData:[]
  	}
  }, 
  mounted(){
  	this.getList()
  },
  methods: {
	  async getList(){
	  	var dt = {
	  		"params": {
	  				"normGuid": "2231a132-c9f5-4788-aed7-285a3dedc779",
	  				"fieldList": [{"key":"statictype","value":"宁波"}]
	  			}
	  	};
	  	const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
	  	let {custom:{result}}={...aaa}
	  	this.cockpitData=result.cockpitData
	  	this.$nextTick(()=>{
	  		this.myEcharts();
	  	})
	  },
    myEcharts(){
      let myChart = this.$echarts.init(document.getElementById('main'));
	  let myColor=['#FAC858','#73C0DE','#91CC75','#5470C6','#EE6666']
	  let myColor1=['#0088FF','#FFA407','#FC8452 ']
	  // let seriesData1 = this.nbinnerseries;
	  // let seriesData2 = this.nbouterseries;
	  let bigData=[]
	  
	  for(let item of this.cockpitData){
		  bigData.push({
			  name:item.mapping_name,
			  value:item.count
		  })
	  }
	  
	  let allValue = this.cockpitData.map(item=>{
	  	return parseInt(item.count);
	  });
	  let titleList=[... new Set(this.cockpitData.map(item=>{
	  	return item.patent_type;
	  }))];
	  console.log(this.cockpitData)
	  let fmSum=allValue.slice(0,5).reduce((n,m) => n + m,0)
	  let sySum=allValue.slice(5,10).reduce((n,m) => n + m,0)
	  let wgSum=allValue.slice(10,15).reduce((n,m) => n + m,0)
	  // console.log(this.cockpitData[0].patent_type)
	  let smallData=[{
		  name:titleList[0],
		  value:fmSum
	  },
	  {
	  		  name:titleList[1],
	  		  value:sySum
	  },{
		  name:titleList[2],
		  value:wgSum
	  }
	  ]
	  
      //配置图表
      var option = {
		   // backgroundColor: 'rgba(3, 16, 38, 0.71)',
		legend:{
			data:bigData,
			orient: "vertical",
			itemWidth: 10,
			itemHeight: 10,
			icon: "circle",
			right:'2%',
			top:'25%',
			textStyle: {
			      color: '#DFF8FF',
				  fontSize:15
			    },
				
		},
    series: [
		{
            color: myColor1,
            type: 'pie',
            center: ['34%', '50%'],
            radius: ['0%', '39%'],
            itemStyle: {
                normal: {
                    borderColor: 'rgba(3, 16, 38, 0.71)',
                    borderWidth:3,
                }
            },
            label: {
                normal: {
                    position: 'inner',
                    textStyle: {
						rich:{
							aaa:{
								fontSize: 14,
								color: '#DFF8FF',
								fontWeight: "bold",
								padding: [0, 0, 10, 0]
							},
							bbb:{
								fontSize: 14,
								color: '#DFF8FF',
								fontWeight: "bold",
								padding: [2, 10, 0, 0]
							},
							ccc:{
								align:'right',
								fontSize: 14,
								color: '#DFF8FF',
								fontWeight: "bold",
								padding: [0, 0, 0, 5]
							}
						}
                    },
					formatter:function(params){
						switch(params.dataIndex){
							case 0:
								return "{aaa|"+ params.name.slice(0,2) +"}"
								break;
							case 1:
								return "{bbb|"+params.name.slice(0,2)+'\n'+params.name.slice(2,4)+"}"
								break;
							default:
								return "{ccc|"+params.name.slice(0,2)+'\n'+params.name.slice(2,4)+"}"
								break;
						}
						
					}
                },
				
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: smallData
        },
        {
            type: 'pie',
            color: myColor,
            radius: ['50%', '65%'],
			center: ['34%', '50%'],
            data: bigData,
            labelLine: {
                normal: {
                    length:7,
                    length2: 14,
                    lineStyle: {
                        color: '#C8C8C8'
                    }
                }
            },
            label: {
                normal: {
                    formatter:'{c}',
                    color: "#02D4FE",
					fontSize: 15,
					fontWeight: "bold",
                    distanceToLabelLine: 0,
                    padding: [-2, 0, 0, 0],
                   
                }
            },
        }
    ]
};
      myChart.setOption(option);
    }
  },
}
</script>
 
 
<style>
 
</style>